<template>
  <view class="demo-pull-refresh">
    <fu-pull-refresh
      :loading="loading"
      :finished="finished"
      :error="error"
      @refresh="onRefresh"
      @load-more="onLoadMore"
    >
      <view 
        v-for="item in list" 
        :key="item.id"
        class="list-item"
      >
        {{ item.text }}
      </view>
    </fu-pull-refresh>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      error: false,
      page: 1
    }
  },
  
  mounted() {
    this.loadData()
  },
  
  methods: {
    // 加载数据
    async loadData() {
      if (this.loading || this.finished) return
      
      this.loading = true
      this.error = false
      
      try {
        // 模拟异步请求
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 模拟数据
        const newItems = Array(10).fill(0).map((_, index) => ({
          id: this.list.length + index + 1,
          text: `列表项 ${this.list.length + index + 1}`
        }))
        
        this.list.push(...newItems)
        this.page++
        
        // 模拟数据加载完毕
        if (this.page > 3) {
          this.finished = true
        }
      } catch (e) {
        this.error = true
      } finally {
        this.loading = false
      }
    },
    
    // 刷新
    onRefresh() {
      this.page = 1
      this.list = []
      this.finished = false
      this.loadData()
    },
    
    // 加载更多
    onLoadMore() {
      this.loadData()
    }
  }
}
</script>

<style lang="scss">
.demo-pull-refresh {
  height: 100vh;
  background: #fff;
}

.list-item {
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f5f5;
}
</style> 